<template>
    <!-- plugin/components/diy-notice/diy-notice.wxml -->
    <view
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >
        <view
            class="content"
            :style="
                'background-color: ' +
                componentData.data.bgColor +
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx;'
            "
        >
            <image
                v-if="componentData.data.iconType == 2 && componentData.data.sysIcon == 1"
                src="https://mall.xzthealth.com/notice1.png"
                style="width: 48rpx; height: 48rpx; background-color: transparent"
            ></image>
            <image
                v-if="componentData.data.iconType == 2 && componentData.data.sysIcon == 2"
                src="https://mall.xzthealth.com/notice2.png"
                style="width: 48rpx; height: 48rpx; background-color: transparent"
            ></image>
            <image
                v-if="componentData.data.iconType == 2 && componentData.data.sysIcon == 3"
                src="https://mall.xzthealth.com/notice3.png"
                style="width: 48rpx; height: 48rpx; background-color: transparent"
            ></image>
            <view v-if="componentData.data.iconType == 3">
                <view style="width: 48rpx; height: 48rpx; background: #ff7342" v-if="!componentData.data.iconUrl"></view>
                <image v-else style="width: 48rpx; height: 48rpx; background-color: transparent" :src="componentData.data.iconUrl"></image>
            </view>
            <block v-if="componentData.data.direct == 2">
                <diy-navigator :url="fileList[index].page.url || fileList[index].url" @callback="callback">
                    <view class="van-notice-bar__wrap" :style="componentData.data.iconType == 1 ? 'width:calc(100vw - 40rpx);' : 'width:calc(100vw - 88rpx);'">
                        <view
                            class="van-notice-bar__content"
                            :animation="animationData"
                            :style="'color:' + (animationData ? componentData.data.fontColor : 'transparent') + ';' + 'font-weight:' + componentData.data.weight + ';'"
                        >
                            <text decode>{{ fileList[index]['text'] }}</text>
                        </view>
                        <text decode style="color: transparent">{{ fileList[index]['text'] }}</text>
                    </view>
                </diy-navigator>
            </block>
            <swiper class="swiper-container" :autoplay="true" :vertical="true" :circular="true" interval="3000" v-if="componentData.data.direct == 1">
                <swiper-item v-for="(item, index) in componentData.data.fileList" :key="index">
                    <diy-navigator :url="item.page.url || item.url" @callback="callback">
                        <view class="swiper-item">
                            <text :style="'color:' + componentData.data.fontColor + ';' + 'font-weight:' + componentData.data.weight + ';'">{{ item.text }}</text>
                        </view>
                    </diy-navigator>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// plugin/components/diy-notice/diy-notice.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            animate: false,
            marqueeList: [],
            speed: 50,
            scrollable: true,
            delay: 3,
            index: 0,
            fileList: '',
            animationData: 0,

            page: {
                url: ''
            },

            url: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    beforeMount() {},
    mounted() {
        this.setData({
            marqueeList: this.componentData
        });
        console.log(this.componentData); // setInterval(()=>{
        //   this.showMarquee()
        // }, 2000)

        this.resetAnimation = uni.createAnimation({
            duration: 0,
            timingFunction: 'linear'
        });
        const fileList = this.componentData.data.fileList;
        this.setData({
            fileList: fileList
        });
        this.init();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        showMarquee() {
            this.setData({
                animate: true
            });
            let timer = setTimeout(() => {
                this.componentData.data.fileList.push(this.componentData.data.fileList[0]);
                this.componentData.data.fileList.shift();
                this.setData({
                    animate: false
                });
                clearTimeout(timer);
            }, 500);
        },

        init() {
            this.requestAnimationFrame(() => {
                Promise.all([this.getRect(this, '.van-notice-bar__content'), this.getRect(this, '.van-notice-bar__wrap')]).then((rects) => {
                    const [contentRect, wrapRect] = rects;

                    if (contentRect == null || wrapRect == null || !contentRect.width || !wrapRect.width) {
                        return;
                    }

                    const { speed, scrollable, delay } = this;

                    if (scrollable || wrapRect.width < contentRect.width) {
                        const duration = (contentRect.width / speed) * 1000 + 30;
                        this.wrapWidth = wrapRect.width;
                        this.contentWidth = contentRect.width;

                        if (duration > 2000) {
                            this.duration = duration;
                        } else {
                            this.duration = 2000;
                        }

                        this.animation = uni.createAnimation({
                            duration: this.duration,
                            timingFunction: 'linear',
                            delay
                        });
                        this.scroll();
                    } else {
                        this.setData({
                            animationData: 1
                        });
                    }
                });
            });
        },

        scroll() {
            // console.log(this.data.animationData);
            if (this.timer) {
                clearTimeout(this.timer);
            }

            this.timer = null;
            this.setData({
                animationData: this.resetAnimation.translateX(this.wrapWidth).step().export()
            });
            this.requestAnimationFrame(() => {
                this.setData({
                    animationData: this.animation.translateX(-this.contentWidth).step().export()
                });
            });
            this.timer = setTimeout(() => {
                const max = this.fileList.length - 1;
                let index = this.index;
                index++;
                this.setData({
                    index: index > max ? 0 : index,
                    animationData: null
                });
                this.init(); // this.scroll();
            }, this.duration);
        },

        getRect(context, selector) {
            return new Promise((resolve) => {
                uni.createSelectorQuery()
                    .in(context)
                    .select(selector)
                    .boundingClientRect()
                    .exec((rect = []) => resolve(rect[0]));
            });
        },

        requestAnimationFrame(cb) {
            return uni
                .createSelectorQuery()
                .selectViewport()
                .boundingClientRect()
                .exec(() => {
                    cb();
                });
        }
    }
};
</script>
<style lang="scss" scoped>
@import './diy-notice.css';
</style>
